<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" plain icon="el-icon-refresh" @click="tableRefresh"></el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input v-model="search.keyWord" placeholder="账号姓名昵称包含关键词" clearable></el-input>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTableGdshop ref="table" :apiObj="apiObj" :column="tableColumn" stripe remoteSort remoteFilter>
				<template #mobile="scope">
					<div>{{ scope.row.mobile }}</div>
					<div>{{ scope.row.realname }} [{{ scope.row.nickname }}]</div>
				</template>
				<template #coin="scope">
					<div>{{ getTypeName(scope.row.type_name) }}</div>
					<div>
										<span style="color: #f00" v-if="scope.row.coin < 0">
											-{{ scope.row.type_name === "money_coin" ? "￥" : "" }}<span v-if="scope.row.type_name === 'money_coin'">{{
												getMoneyByMinute(Math.abs(scope.row.coin))
											}}</span>
											<span v-else>{{ Math.abs(scope.row.coin) }}</span>
										</span>
						<span style="color: #319809" v-if="scope.row.coin > 0">
											+{{ scope.row.type_name === "money_coin" ? "￥" : ""
							}}<span v-if="scope.row.type_name === 'money_coin'">{{
								getMoneyByMinute(Math.abs(scope.row.coin))
							}}</span>
											<span v-else>{{ Math.abs(scope.row.coin) }}</span>
										</span>
					</div>
				</template>
			</scTableGdshop>
		</el-main>
	</el-container>
</template>

<script setup>
import { ref, reactive } from "vue";
import api from "@/api";
import tool from "@/utils/tool";
const table = ref(null);
const search = reactive({
	keyWord: "",
});
const apiObj = api.member.memberFinance;
function getTypeName(val) {
	switch (val) {
		case "money_coin":
			return "余额";
		case "integral_coin":
			return "积分";
		default:
			return "";
	}
}
function getSrcType(val) {
	switch (val) {
		case "fenxiao_withdraw":
			return "提现";
		case "order":
			return "订单";
		case "recharge":
			return "充值";
		default:
			return "";
	}
}
function upsearch() {
	table.value.upData(search)
}
function tableRefresh() {
	table.value.refresh()
}
function getMoneyByMinute(val) {
	return (val / 100).toFixed(2);
}
const tableColumn = [
	{
		prop: "mobile",
		label: "会员",
		width: 200
	},
	{
		prop: "src_type",
		label: "类型",
		width: 90,
		formatter: (row, column, cellValue) => {
			return getSrcType(cellValue);
		}
	},
	{
		prop: "coin",
		label: "变化",
		width: 120
	},
	{
		prop: "create_time",
		label: "时间",
		width: 160,
		formatter: (row, column, cellValue) => {
			return tool.dateFormat(cellValue * 1000);
		}
	},
	{
		prop: "remark",
		label: "备注",
	}
];
</script>

<style scoped>

</style>
